<template>
    <ul>

        <li v-for="item in list" :key="item.id" @click="$router.push('/detail/' + item.id)">
            <div><img style="width:100%" :src="item.image" alt=""></div>
            <p class="van-multi-ellipsis--l2">{{ item.title }}</p>
            <p style="color:red">￥ {{ item.price }}</p>
        </li>
    </ul>
</template>
<script setup>
import request from '@/utils/request.js'
import { onMounted, ref } from 'vue'
const list = ref([])
onMounted(() => [
    request.get('/list', {
        params: { pagination: 1, pageNum: 30 }
    }).then(res => {
        if (res.data.code == 200) {
            console.log(res.data.data)
            list.value = res.data.data
        }
    })
])
</script>
<style lang="scss" scoped>
ul {
    column-count: 2;

    li {
        break-inside: avoid;
    }
}
</style>